@import '@native/scss/funcs.less';

.wx-mini-app,
.wx-mini-app__webviews,
.wx-mini-app__launch-screen {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-color: #fff;
}

.wx-mini-app-navigation__actions {
	position: absolute;
	right: 14px * @proportion;
	border-radius: 32px * @proportion;
	width: 166px * @proportion;
	box-sizing: border-box;
	height: 64px * @proportion;
	top: 100px * @proportion;
	display: flex;
	flex-direction: row;
	overflow: hidden;
	z-index: 10;

	&.wx-mini-app-navigation__actions--black {
		background-color: rgba(255, 255, 255, .8);
		border: 1px solid rgba(234, 234, 234, .8);

		.wx-mini-app-navigation__actions-variable {
			background-image: url('@native/images/mini-action.png');

			&::after {
				background-color: #ccc;
			}
		}

		.wx-mini-app-navigation__actions-close {
			background-image: url('@native/images/mini-close.png');
		}
	}

	&.wx-mini-app-navigation__actions--white {
		background-color: rgba(0, 0, 0, .2);
		border: 1px solid rgba(234, 234, 234, .8);

		.wx-mini-app-navigation__actions-variable {
			background-image: url('@native/images/mini-action-white.png');

			&::after {
				background-color: #ccc;
			}
		}

		.wx-mini-app-navigation__actions-close {
			background-image: url('@native/images/mini-close-white.png');
		}
	}

	li {
		list-style: none;
		flex: 1;
		position: relative;
		cursor: pointer;
	}
}

.wx-mini-app-navigation__actions-variable {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 38px * @proportion auto;

	&::after {
		content: '';
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 1px;
		height: 40px * @proportion;
		opacity: .8;
	}
}

.wx-mini-app-navigation__actions-close {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 35px * @proportion 35px * @proportion;
}

@keyframes animX{
	0% {
		left: -7px * @proportion;
	}
	100% {
		left: 127px * @proportion;
	}
}

@keyframes animY{
	0% {
		top: -7px * @proportion;
	}
	100% {
		top: 127px * @proportion;
	}
}

.wx-mini-app__launch-screen {
	display: none;
	background-color: #fff;
	z-index: 8;

	.wx-mini-app__launch-screen-content {
		position: absolute;
		left: 50%;
		top: 540px * @proportion;
		transform: translateX(-50%);
	}

	.wx-mini-app__logo {
		width: 134px * @proportion;
		height: 134px * @proportion;
		position: relative;

		.wx-mini-app__logo-img {
			width: 84px * @proportion;
			height: 84px * @proportion;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			z-index: 1;
			border-radius: 50%;
			overflow: hidden;

			img {
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
			}
		}

		.wx-mini-app__logo-circle {
			width: 134px * @proportion;
			height: 134px * @proportion;
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			z-index: 2;
			border: 1px solid #e9e9e9;
			border-radius: 50%;
			box-sizing: border-box;
		}

		.wx-mini-app__green-point {
			position: absolute;
			width: 14px * @proportion;
			height: 14px * @proportion;
			border-radius: 50%;
			background-color: #fff;
			top: 0;
			left: 0;
			z-index: 3;
			animation: animX 800ms cubic-bezier(0.36,0,0.64,1) -400ms infinite alternate, animY 800ms cubic-bezier(0.36,0,0.64,1)  0s infinite alternate;

			&::after {
				content: '';
				position: absolute;
				width: 7px * @proportion;
				height: 7px * @proportion;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				border-radius: 50%;
				background-color: #59be6b;
			}
		}
	}

	.wx-mini-app__name {
		font-size: 33px * @proportion;
		color: #333;
		text-align: center;
		padding-top: 36px * @proportion;
	}
}

.wx-mini-app__webviews {
	z-index: 1;
}